<template>
	<view>
		<u-popup :show="useCustomer.showOne" :round="10" mode="bottom" @close="useCustomer.showOne=false" closeable :zIndex="998">
			<view class="show_content">
				<view class="show_titile">订单确认</view>
				<orderListDetails :itemData="useCustomer.confirmData" :type="2"></orderListDetails>
				<view class="heng"></view>
				<!-- 送货图片上传 -->
				<view class="show_tp">送货图片上传(最多6张)</view>
				<!-- 送货图片上传 end-->
				<confirmPopupPhoto :itemData="useCustomer.confirmData"></confirmPopupPhoto>
				<view class="btns">
					<!-- <view class="btn btn_1">
						<view class="in">修改备注</view>
					</view> -->
					<view class="btn btn_2" @click="confirmClick(useCustomer.confirmData)">
						<view class="in">确认送达</view>
					</view>
				</view>
			</view>
		</u-popup>
		
		<!-- 确认收货弹窗 -->
		<u-modal :show="confirmShow" :title="'是否送达?'" showCancelButton @cancel="confirmShow=false" @confirm="confirmShowModal"></u-modal>
		<!-- 确认收货弹窗 end-->
		
	</view>
</template>

<script setup>
	import { ref } from "vue"
	import orderListDetails from "./orderListDetails.vue";//订单详情
	import confirmPopupPhoto from "./confirmPopupPhoto.vue";//上传图片
	
	//引入用户相关的小仓库
	import useCustomerStore from '@/store/customer.js'
	const useCustomer = useCustomerStore()
	
	const confirmShow=ref(false);

	//预览图片
	function previewImageClick(img){
		uni.previewImage({
			urls: [img]
		})
	}
	
	//确认送达
	function confirmClick(item){
		if(useCustomer.confirmData.images.length>0){
			confirmShow.value=true;
		}else{
			uni.showToast({title: '请上传送货图片!',icon:'none'});
		}
		
	}
	
	//确认送达弹窗
	function confirmShowModal(){
		confirmShow.value=false;
		useCustomer.listTrue=[];
		//到达目的地0待配送 1 完成 2 送货中
		useCustomer.postOrderLogisticStatus(useCustomer.confirmData.id,1);
	}
	
</script>

<style lang="scss" scoped>
.show_content{
	padding: 30rpx;
	.show_titile{
		text-align: center;
		font-size: 32rpx;
		color: #000;
		font-weight: 700;
		margin-bottom: 30rpx;
	}
}
:deep(.u-transition){
	z-index: 997 !important;
}
.heng{
	line-height: 60rpx;
	border-bottom: 2rpx solid #F7F7F7;
	padding-bottom: 10rpx;
	margin-bottom: 20rpx;
	margin-top: 10rpx;
}
.show_tp{
	font-size: 30rpx;
	color: #333;
	margin-bottom: 30rpx;
	font-weight: 700;
}
.btns{
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	margin-top: 30rpx;
	margin-bottom: 10rpx;
	.btn{
		background: #FFF2DA;
		padding: 22rpx 0rpx;
		border-radius: 12rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		transition: 0.3s all;
		.in{
			font-size: 30rpx;
			color: #fff;
			font-weight: 700;
		}
		.iconfont{
			font-size: 36rpx;
			width: 40rpx;
			height: 40rpx;
			color: #FA3656;
			margin-left: 20rpx;
		}
	}
	.btn_1{
		width: 40%;
		//background: radial-gradient(circle, #eee, #e1e1e1);
		background:none;
		background: #eee;
		border: 2rpx solid #eee;
		.in{
			color: #333;
		}
	}
	.btn_1:active{
		background: radial-gradient(circle, #FFF2D1, #f3e0af);
	}
	.btn_2{
		width: 100%;
		background: radial-gradient(circle, #f5584f, #E02E24);
		.iconfont{
			font-size: 40rpx;
			color: #fff;
			margin-left: 14rpx;
		}
	}
	.btn_2:active{
		background: radial-gradient(circle, #E02E24, #f7483e);
	}
}
</style>
